<template>
  <!-- 左侧按钮组 -->
  <el-button-group>
    <el-button
      style="color: #00cd00"
      icon="circle-plus"
      @click.prevent="
        setSubTableSubmitFunctionType('insert');
        setSubTableFormInitValue({});
        changeSubTableSubmitFormDialogVisible();
      "
      >新增
    </el-button>
  </el-button-group>
  <el-table :data="props.tableData" stripe>
    <!-- 选择框 -->
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- 序号 -->
    <el-table-column type="index" label="序号" width="60"></el-table-column>
    <!-- 数据列 -->
    <template v-for="(tableField, key) in props.tableFieldList" :key="key">
      <el-table-column
        :prop="tableField.filedName"
        :label="tableField.label"
        :width="tableField.width"
        :min-width="tableField.minWidth"
        sortable="custom"
      >
      </el-table-column>
    </template>
    <!-- 编辑按钮 -->
    <el-table-column label="编辑" width="80" fixed="right">
      <template #default="scope">
        <el-button
          type="text"
          size="small"
          icon="edit"
          @click.prevent="
            setSubTableSubmitFunctionType('update');
            setSubTableFOrmIndex(scope.$index);
            setSubTableFormInitValue(scope.row);
            changeSubTableSubmitFormDialogVisible();
          "
          >编辑
        </el-button>
      </template>
    </el-table-column>
    <!-- 删除按钮 -->
    <el-table-column label="删除" width="80" fixed="right">
      <template #default="scope">
        <el-button
          style="color: #ee3b3b"
          type="text"
          size="small"
          @click.prevent="deleteSelect(scope.$index)"
          icon="delete"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <sub-table-submit-form-dialog>
    <template #subTableSubmitFormSlot>
      <slot name="subTableSubmitForm"></slot>
    </template>
  </sub-table-submit-form-dialog>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, provide, withDefaults } from "vue";
import { TableField } from "@/models/TableSetting";
import { SubTableSubmitForm } from "@/components/table/subTable/SubTableSubmitForm";
import SubTableSubmitFormDialog from "@/components/table/subTable/SubTableSubmitFormDialog.vue";

export interface SubTableProp {
  tableData: Array<Record<string, unknown>>;
  tableFieldList: Array<TableField>;
  submitForm: Record<string, unknown>;
  submitFormDialog: {
    title: string;
    width: string;
  };
}

const props = withDefaults(defineProps<SubTableProp>(), {
  tableData: () => {
    return {} as Array<Record<string, unknown>>;
  },
  tableFieldList: () => {
    return {} as Array<TableField>;
  },
  submitForm: () => {
    return {};
  },
  submitFormDialog: () => {
    return {
      title: "test",
      width: "50%",
    };
  },
});
provide("subTableProp", props);

/**
 * emit 申明
 */
const emit = defineEmits<{
  // (
  //   e: "sub-dataPeople-format",
  //   columnName: string,
  //   cellValue: string,
  //   callback: (value: string) => void
  // ): void;
  (
    e: "sub-table-delete",
    subTableDeleteResultTableData: Array<Record<string, unknown>>
  ): void;
  (
    e: "set-sub-table-form-init-value",
    type: string,
    row: Record<string, unknown>
  ): void;
  (
    e: "change-sub-table-record",
    subTableSubmitFunctionType: string,
    selectedIndex: number
  ): void;
}>();

// 表格数据规范化.
// const { subDataFormat } = SubTableData(emit);

const deleteSelect = (deletedIndex: number) => {
  const subTableDeleteResultTableData = props.tableData.filter(
    (item, index) => {
      return index !== deletedIndex;
    }
  );
  emit("sub-table-delete", subTableDeleteResultTableData);
};

// 数据新增、编辑.
const {
  changeSubTableSubmitFormDialogVisible,
  setSubTableSubmitFunctionType,
  setSubTableFormInitValue,
  setSubTableFOrmIndex,
} = SubTableSubmitForm(props, emit);
</script>

<style scoped></style>
